<form name="form" ng-init="vm.init();refresh(vm.callback);" novalidate>
  <script id="opt-toolbar" type="text/ng-template">
    <div>
      <div class="btn-group x-btn-list">
        <button type="button" class="btn btn-default" ng-click="vm.sendType = 'send';vm.sendRequest(form.$valid)"
            ng-disabled="form.$invalid || !vm.completed || !vm.dataParsable">
          <i class="fa fa-send"></i> 发送</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
            ng-disabled="form.$invalid || !vm.completed || !vm.dataParsable">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><button type="button" class="btn btn-default btn-block"
              ng-click="vm.sendType = 'download';vm.sendRequest(form.$valid)">发送和下载</button></li>
        </ul>
      </div>
      <div class="btn-group x-btn-list">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
            ng-disabled="form.$invalid || !vm.dataParsable">
          <i class="fa fa-code"></i> 代码 <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="javascript:void(0)" ng-click="vm.showCode(form.$valid, 'curl')">cURL</a></li>
          <li class="divider"></li>
          <li><a href="javascript:void(0)" ng-click="vm.showCode(form.$valid, 'postman')">Postman</a></li>
        </ul>
      </div>
      <button id="copy" type="button" class="btn btn-default" ng-disabled="vm.respBody == null">
        <i class="fa fa-copy"></i> 复制</button>
      <button class="btn btn-default" type="button" ng-click="vm.reset()"><i class="fa fa-repeat"></i> 重置</button>
    </div>
  </script>
  <div class="row x-view-body" movezone="{left:0,ratio:-1}">
    <div class="col-md-7 col-xl-6">
      <div class="x-view-scope">
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon">
              <select ng-model="vm.method" ng-change="vm.changeMethod(vm.method)">
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="PATCH">PATCH</option>
                <option value="DELETE">DELETE</option>
                <option value="HEAD">HEAD</option>
                <option value="OPTIONS">OPTIONS</option>
              </select>
            </span>
            <div url-select="vm.url">
              <input type="text" class="form-control" name="url" ng-model="vm.url" placeholder="URL" autofocus
                  required pattern="^http(s)?://[\w-\.]+(:\d+)?(/[\w-\./\?%&=]*)?(?:#(.*))?"
                  ng-class="{'x-invalid': form.$submitted && form.url.$invalid}">
              <div class="input-group-addon">
                <label class="checkbox-inline">
                  <input type="checkbox" ng-value="true" ng-model="vm.cors"> CORS
                </label>
              </div>
            </div>
          </div>
        </div>
        <uib-tabset active="vm.activeTab" type="tabs" class="x-request">
          <uib-tab index="0" heading="Params({{vm.queryParamsCount}})">
            <div form-table form-type="'query'" form-inputs="vm.queryParams"></div>
          </uib-tab>
          <uib-tab index="1" heading="Authorization">
            <div class="row">
              <div class="col-md-5">
                <div class="form-group">
                  <label>Auth Type:</label>
                  <select class="form-control" ng-model="vm.authType" ng-change="vm.changeAuthValue()">
                    <option value="">No Auth</option>
                    <option value="Basic">Basic Auth</option>
                    <option value="Bearer">Bearer Token</option>
                  </select>
                </div>
              </div>
              <div class="col-md-7 x-line">
                <div ng-if="vm.authType == 'Basic'">
                  <div class="form-group">
                    <label>Username:</label>
                    <input type="text" class="form-control" ng-model="vm.authUser" ng-change="vm.changeAuthValue()">
                  </div>
                  <div class="form-group" ng-if="!vm.showAuthPass">
                    <label>Password:</label>
                    <input type="password" class="form-control" ng-model="vm.authPass" ng-change="vm.changeAuthValue()">
                  </div>
                  <div class="form-group" ng-if="vm.showAuthPass">
                    <label>Password:</label>
                    <input type="text" class="form-control" ng-model="vm.authPass">
                  </div>
                  <div class="checkbox">
                    <label><input type="checkbox" ng-model="vm.showAuthPass"> 显示密码</label>
                  </div>
                </div>
                <div ng-if="vm.authType == 'Bearer'">
                  <div class="form-group">
                    <label>Token:</label>
                    <textarea rows="10" class="form-control" ng-model="vm.authToken" ng-change="vm.changeAuthValue()"></textarea>
                  </div>
                </div>
              </div>
            </div>
          </uib-tab>
          <uib-tab index="2" heading="Headers({{vm.headerParamsCount}})">
            <div form-table form-type="'header'" form-inputs="vm.headerParams"></div>
          </uib-tab>
          <uib-tab index="3" heading="Body" disable="vm.method == 'GET' || vm.method == 'HEAD'">
            <div class="form-group">
              <label class="radio-inline" ng-repeat="dataType in vm.dataTypes">
                <input type="radio" name="data-type" value="{{dataType}}" ng-model="vm.dataType"> {{dataType}}
              </label>
              <div class="radio-inline btn-group" style="margin-left:0" ng-show="vm.dataType == 'raw'">
                <a href="javascript:void(0)" data-toggle="dropdown">{{vm.rawDataType.label}}
                    <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li ng-repeat="rawDataType in vm.rawDataTypes" ng-click="vm.rawDataType = rawDataType"
                      ng-class="{'active': rawDataType.value == vm.rawDataType.value}">
                      <a href="javascript:void(0)">{{rawDataType.label}}</a></li>
                </ul>
              </div>
            </div>
            <div id="form-data" ng-show="vm.dataType == 'form-data'">
              <div form-table form-type="'form-data'" form-inputs="vm.formDataParams"></div>
            </div>
            <div id="x-www-form-urlencoded" ng-show="vm.dataType == 'x-www-form-urlencoded'">
              <div form-table form-type="'form'" form-inputs="vm.formParams"></div>
            </div>
            <div id="raw" ng-show="vm.dataType == 'raw'">
              <div class="x-editor">
                <pre id="data-editor"></pre>
              </div>
            </div>
            <div id="binary" class="form-group" ng-if="vm.dataType == 'binary'">
              <input type="file" name="file">
            </div>
          </uib-tab>
          <uib-tab index="4" heading="Cookies">
            <textarea class="form-control" ng-model="vm.cookies" rows="10"
                placeholder="cookieName=cookieValue（多个Cookie以换行隔开）"></textarea>
          </uib-tab>
        </uib-tabset>
      </div>
    </div>
    <div class="col-md-5 col-xl-6">
      <div class="x-view-scope x-response-tab">
        <uib-tabset active="vm.respActiveTab" type="tabs" class="x-response">
          <uib-tab index="0" heading="Body">
            <div class="x-editor" ng-class="{'x-full-screen x-frame': vm.fullScreen}">
              <pre class="x-output" id="data-viewer"></pre>
            </div>
          </uib-tab>
          <uib-tab index="1" heading="Headers({{vm.respHeaders.length}})">
            <p ng-repeat="header in vm.respHeaders">
              <b>{{header.name | xHeaderKey}}: </b>{{header.value}}
            </p>
          </uib-tab>
          <uib-tab index="2" heading="Cookies">
            <p ng-repeat="cookie in vm.respCookies track by $index">{{cookie}}</p>
          </uib-tab>
          <uib-tab index="3" heading="Status:{{vm.respStatus}}" disable="true">
        </uib-tabset>
      </div>
    </div>
  </div>
  <script type="text/ng-template" id="viewer-tools">
    <div class="x-editor-tool">
      <div class="x-toolbar btn-group">
        <button type="button" class="btn btn-default btn-xs" ng-click="vm.toggleAutowrap()" title="自动换行">
          <i class="fa" ng-class="{'fa-toggle-on': vm.autowrap, 'fa-toggle-off': !vm.autowrap}"></i></button>
        <button type="button" class="btn btn-default btn-xs" ng-click="vm.toggleFoldall()"
            title="{{vm.collapsed ? '全部展开' : '全部折叠'}}">
          <i class="fa" ng-class="{'fa-plus-square-o': vm.collapsed, 'fa-minus-square-o': !vm.collapsed}"></i>
        </button>
        <button type="button" class="btn btn-default btn-xs" ng-click="vm.showSearchbox()" title="查找">
          <i class="fa fa-search"></i></button>
        <button type="button" class="btn btn-default btn-xs" ng-click="vm.fullScreen = !vm.fullScreen"
            title="{{vm.fullScreen ? '退出全屏' : '全屏'}}">
          <i class="fa" ng-class="{'fa-compress': vm.fullScreen, 'fa-expand': !vm.fullScreen}"></i>
        </button>
      </div>
    </div>
  </script>
</form>
